<html>
<head>
	<script src="../../api/Sprite.js" type="text/javascript" language="javascript" charset="utf-8"></script>
	<script src="../../api/engine/DirtyRenderer.js" type="text/javascript" language="javascript" charset="utf-8"></script>
</head>
<body>
	<canvas id="canvas" width="900" height="800" style="display: block">
	</canvas>
	<script>
		var canvas = document.getElementById("canvas");
		
		var stage = new Sprite();
		stage.setWidth(900);
		stage.setHeight(800);
		stage.render = function (context) {
			context.fillStyle = "rgb(0,0,0)";
			context.fillRect(this.getX(), this.getY(), this.getWidth(), this.getHeight());
			Sprite.prototype.render.call(this, context);
		}
		
		for(i = 0; i<2000; i++)
		{
			var sprite = new Sprite();
			sprite.setWidth(50);
			sprite.setHeight(50);
			sprite.setX(Math.random()*400);
			sprite.setY(Math.random()*900-50);
			sprite.direction = "increase";
			sprite.speed = Math.random()*10;
			sprite.color = 40+Math.round(Math.random()*200);
			
			sprite.layout = function (context) {
				if(this.direction == "increase")
					this.setX(this.getX()+this.speed);
				else
					this.setX(this.getX()-this.speed);
				if(this.getX()+this.getWidth() > this._parent.getWidth())
					this.direction = "decrease";
				if(this.getX() < 0)
					this.direction = "increase";
			}
			
			sprite.render = function (context) {
				context.fillStyle = "rgb(0,"+this.color+",0)";
				context.fillRect(this.getX(), this.getY(), this.getWidth(), this.getHeight());
			}
			
			stage.addChild(sprite);
		}

		
		var renderer = new engine.DirtyRenderer(canvas, stage, 1);
		renderer.start();

	</script>
</body>
</html>
